<template>
    <el-card style="max-width: 480px; margin: 200px auto">

      <h2>欢迎登录学生管理系统</h2>

      <el-form :model="form" label-width="auto" style="max-width: 480px">
        <el-form-item label="账号">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"/>
        </el-form-item>

        <el-form-item>
          <el-button label-width="100px" type="primary" @click="login">登录</el-button>
        </el-form-item>

      </el-form>
    </el-card>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
  name: "LoginView",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    login() {
      //调用登录后台方法
      this.$axios.post("/login", this.$qs.stringify(this.form))
          .then(result => {
            console.log('login',result.data)
            //判断是否连接成功
            if (result.data.code===200){
              //跳转到主界面
              if (result.data.data){
                ElMessage({
                  message: '登录成功！',
                  type: 'success',
                })
                this.$router.push({path:"/student"})
              }else {
                ElMessage.error('账号或密码错误！')
              }
            }
          })

    }
  }
}
</script>

<style scoped>
el-button{
  float: left;
}
</style>